{% extends 'ApplicationBootstrapBundle::layoutAdmin.html.twig' %}

{% block title %}SB Admin - Bootstrap Admin Template{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block javascripts %}

    <!-- Flot Charts JavaScript -->
    <!--[if lte IE 8]><script src="{{ asset('bundles/applicationbootstrap/js/charts/flot/excanvas.min.js') }}" type="text/javascript"></script><![endif]-->
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/flot/jquery.flot.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/flot/jquery.flot.tooltip.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/flot/jquery.flot.resize.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/flot/jquery.flot.pie.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bundles/applicationbootstrap/js/charts/flot/flot-data.js') }}" type="text/javascript"></script>

{% endblock %}

{% block body %}
<div id="page-wrapper">
    <div class="container-fluid">
    
        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Charts
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-dashboard"></i>  <a href="{{ path('_admin-dashboard_index') }}">Dashboard</a>
                    </li>
                    <li class="active">
                        <i class="fa fa-bar-chart-o"></i> Charts
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Flot Charts -->
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">Flot Charts</h2>
                <p class="lead">Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. For full usage instructions and documentation for Flot Charts, visit <a target="_blank" href="http://www.flotcharts.org/">http://www.flotcharts.org/</a> <a class="btn btn-primary btn-sm btn-social-icon" href="https://github.com/flot/flot" target="_blank"><i class="fa fa-github"></i> GitHub</a>.</p>
            </div>
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-bar-chart-o"></i> Line Graph Example with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-line-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-lg-4">
                <div class="panel panel-green">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Pie Chart Example with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-pie-chart"></div>
                        </div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div class="panel panel-yellow">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Multiple Axes Line Graph Example with Tooltips and Raw Data</h3>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-multiple-axes-chart"></div>
                        </div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-red">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Moving Line Chart</h3>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-moving-line-chart"></div>
                        </div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> Bar Graph with Tooltips</h3>
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="flot-bar-chart"></div>
                        </div>
                        <div class="text-right">
                            <a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    
    </div>
</div>      
{% endblock %}